﻿<Page x:Class="Thirteen23.TED.Views.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="using:Thirteen23.TED.Converters"
    Loaded="OnLoaded" 
    Unloaded="OnUnloaded"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Themes/TalkSortTiles.xaml" />
                <ResourceDictionary Source="../Themes/TedTalkContainerStyle.xaml" />
                <ResourceDictionary Source="../Themes/TedTalk.xaml" />
                <ResourceDictionary Source="../Themes/SortListBoxItem.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <converters:SortTileVisibilityConverter x:Key="SortTileVisibilityConverter" />
            <converters:SortTileContentConverter x:Key="SortTileContentConverter" />

            <!-- This template needed in this file for an app freeze related to the converters -->
            <DataTemplate x:Key="TedTalk">
                <Grid HorizontalAlignment="Left" Width="250" Height="248">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="167" />
                        <RowDefinition Height="28" />
                        <RowDefinition Height="53" />
                    </Grid.RowDefinitions>

                    <Border Background="#ebebeb">
                        <Image Source="{Binding ImageLocation}" Stretch="UniformToFill" />
                    </Border>

                    <Border Grid.Row="1"
                        Background="#bfbfbf"
                        Margin="0,1,0,1">
                        <TextBlock TextWrapping="Wrap" 
                               Text="{Binding DateString}" 
                               FontFamily="Segoe UI"
                               FontSize="10"
                               Foreground="#FFFFFF"
                               FontWeight="Bold"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Center"
                               TextAlignment="Center" />
                    </Border>

                    <Border Grid.Row="2"
                        Background="#ebebeb">

                        <StackPanel VerticalAlignment="Center">
                            <TextBlock Text="{Binding Author}" 
                               TextAlignment="Center"
                               HorizontalAlignment="Stretch"
                               Margin="10,-4,10,0"
                               FontSize="20"
                               FontFamily="Segoe UI"
                               Foreground="#9d9d9d"
                               TextTrimming="WordEllipsis" />

                            <TextBlock Text="{Binding SanitizedTitle}" 
                               TextAlignment="Center"
                               HorizontalAlignment="Stretch"
                               Margin="10,0,10,0"
                               FontSize="12"
                               FontFamily="Segoe UI"
                               Foreground="#595752"
                               FontStyle="Italic"
                               TextTrimming="WordEllipsis" />
                        </StackPanel>
                    </Border>

                    <ContentControl
                        Grid.RowSpan="3"
                        ContentTemplate="{StaticResource DateTile}"
                        Content="{Binding Converter={StaticResource SortTileContentConverter}}"
                        Visibility="{Binding Converter={StaticResource SortTileVisibilityConverter}}" />
                </Grid>
            </DataTemplate>


        </ResourceDictionary>
    </Page.Resources>
    <Grid x:Name="LayoutRoot" Background="#FFFFFF">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="Full" />
                <VisualState x:Name="Fill" />
                <VisualState x:Name="Portrait" />
                <VisualState x:Name="Snapped" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="LoadingStates">
                <VisualState x:Name="Loading">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="LoaderPanel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="NotLoading">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="LoaderPanel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="160"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Image Source="../Images/background.png"
               Stretch="Fill"
               Grid.RowSpan="2"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               Margin="0,15,0,0" />

        <Rectangle UseLayoutRounding="True" 
                   Height="15" 
                   VerticalAlignment="Top" HorizontalAlignment="Stretch" 
                   Fill="#cbcbcb" />
        <Rectangle UseLayoutRounding="True" 
                   Margin="0,15,0,0"
                   Height="1" 
                   VerticalAlignment="Top" HorizontalAlignment="Stretch" 
                   Fill="#f92e00" />

        <Image Source="../Images/logo.png"
               HorizontalAlignment="Center"
               VerticalAlignment="Top"
               Width="308"
               Height="76"
               Margin="0,42,0,0" />

        <TextBlock x:Name="PagingText"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom"
                   Margin="18,0,0,0"
                   FontFamily="Segoe UI"
                   FontSize="10"
                   FontWeight="Bold"
                   Foreground="#bfbfbf"
                   Visibility="Collapsed">
            <TextBlock.RenderTransform>
                <TranslateTransform Y="4" />
            </TextBlock.RenderTransform>
            <Run xml:space="preserve" Text="VIEWING " /><Run FontSize="12" x:Name="CurrentPagingSet" /><Run xml:space="preserve" Text=" of " /><Run FontSize="12" x:Name="TotalCount" />
        </TextBlock>

        <StackPanel  
                     Margin="0,0,18,6"
                    Orientation="Horizontal"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom">

            <TextBlock 
                    Text="SORT BY"
                   Margin="0,0,10,0"
                    VerticalAlignment="Center"
                   FontFamily="Segoe UI"
                   FontSize="10"
                   FontWeight="Bold"
                   Foreground="#bfbfbf" />

            <ListBox x:Name="Sort"
                     SelectedIndex="0"
                      Background="Transparent"
                      FontFamily="Segoe UI"
                      FontSize="10"
                      FontWeight="Bold"
                      Foreground="#bfbfbf">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBoxItem Style="{StaticResource SortListBoxItem}">DATE</ListBoxItem>
                <ListBoxItem Style="{StaticResource SortListBoxItem}">TITLE</ListBoxItem>
                <ListBoxItem Style="{StaticResource SortListBoxItem}">AUTHOR</ListBoxItem>
            </ListBox>
        </StackPanel>



        <GridView x:Name="ItemGridView" 
                  Grid.Row="1" 
                  ItemTemplate="{StaticResource TedTalk}"
                  ItemContainerStyle="{StaticResource TedTalkContainerStyle}" 
                  BorderThickness="0" 
                  VerticalAlignment="Stretch" 
                  HorizontalAlignment="Stretch"
                  Background="Transparent" 
                  SelectionChanged="OnSelectionChanged">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid VerticalChildrenAlignment="Top"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>


        <StackPanel x:Name="LoaderPanel"
                  Grid.Row="1"
                  VerticalAlignment="Center">
            <TextBlock HorizontalAlignment="Center"
                       Text="Loading..."
                       FontSize="14"
                       Foreground="Gray" />

            <ProgressBar x:Name="Loader"
                         Margin="0,10,0,0"
                         Foreground="Gray"
                         IsIndeterminate="True" />
        </StackPanel>
    </Grid>
</Page>
